<script setup>
import { ImageWatermark } from 'watermark-js-plus'
import SwiperImages from '../SwiperImages.vue'
import PageSection from './PageSection.vue'
import { getBuildType } from '~/service/products'

defineProps({
  active: Boolean,
})
const { locale } = useLocale()

const router = useRouter()

const list = ref([])
const activeTab = ref(list?.[0]?.id)

const products = computed(() => list.value?.find?.(e => e.id === activeTab.value)?.product) || {}

const { resolveImgURL } = useGlobalStore()
onMounted(async () => {
  const data = await getBuildType()
  list.value = data.list
  activeTab.value = data.list?.[0]?.id
})
</script>

<template>
  <PageSection :active :title="$t('menu.products')" title-en="Products" more-path="/product">
    <div m="t-[22px]">
      <el-tabs v-show="active" v-model="activeTab" class="tabs animate-fade-in-up home-animate">
        <el-tab-pane v-for="buildingType in list" :key="buildingType.id" :name="buildingType.id" :label="get(buildingType, 'name', locale)">
          <Swiper
            class="h-screen"
            :slides-per-view="1"
          >
            <SwiperSlide v-for="product in products" :key="product.id">
              <div p="t-[90px]" class="relative flex justify-center max-md:hidden">
                <div id="product">
                  <SwiperImages :background-visible="true" preview-hoverable :images="safeJSONParse(product?.img_list, [])" preview-width="573px" preview-height="351px" :navigator="false" />
                </div>
                <div w="[518px]" m="l-[127px]">
                  <h3
                    m="b-[24px]" text="[28px]" font=""
                    class="before:mb-[16px] before:block before:h-[3px] before:w-[27px] before:bg-[var(--primary-color)] before:content-['']"
                  >
                    {{ get(product, 'name', locale) }}
                  </h3>
                  <p m="b-[24px]" text="[#44444499] [16px]" leading="[26px]">
                    {{ get(product, 'desc', locale) }}
                  </p>
                  <div m="b-[40px]" class="params">
                    <ul v-for="param in safeJSONParse(get(product, 'params', locale), {})" :key="param.key" class="row">
                      <li class="opacity-80" text="[var(--color-text-secondary)]">
                        {{ param.paramKey }}
                      </li>
                      <li text="[var(--color-text-secondary)]">
                        {{ param.paramValue }}
                      </li>
                    </ul>
                  </div>
                  <ElButton v-show="product" class="btn h-[48px]! rounded-[48px]!" round plain type="primary" @click="router.push(`/product/${product?.id}`)">
                    <span class="text-[20px]">{{ $t('home.product_detail') }}</span>
                    <img class="ml-[12px] h-[20px] w-[20px]" src="~assets/img/icon_arrow_right_primary.png" alt="">
                  </ElButton>
                </div>
              </div>
              <div p="max-md:t-[14px] " class="hidden max-md:block">
                <div class="max-md:w-[full]">
                  <img :src="resolveImgURL(safeJSONParse(product?.img_list, [])?.[0]?.url)" />
                </div>
                <div>
                  <h3 m="max-md:b-[14px] max-md:t-[10px]" text="max-md:[20px]" font="">
                    {{ get(product, 'name', locale) }}
                  </h3>
                  <p m="max-md:b-[14px]" text="[#44444499] max-md:[12px]" leading="max-md:[20px]">
                    {{ get(product, 'desc', locale) }}
                  </p>
                  <div m="max-md:b-[14px]" class="params">
                    <ul v-for="param in safeJSONParse(get(product, 'params', locale), {})" :key="param.key" class="row">
                      <li class="opacity-80" text="[var(--color-text-secondary)]">
                        {{ param.paramKey }}
                      </li>
                      <li text="[var(--color-text-secondary)]">
                        {{ param.paramValue }}
                      </li>
                    </ul>
                  </div>
                  <p flex="~" mt="max-md:[14px]" text="[var(--color-text-secondary)] max-md:[14px]" class="items-center">
                    <NuxtLink to="/product" m="r-[12px]">
                      {{ $t('link.learn_more') }}
                    </NuxtLink>
                    <img src="~/assets/img/icon_arrow_right.png" class="h-[20px] h-auto w-[20px] max-md:w-[16px]" />
                  </p>
                </div>
              </div>
            </SwiperSlide>
          </Swiper>
        </el-tab-pane>
      </el-tabs>
    </div>
  </PageSection>
</template>

<style scoped lang="postcss">
.params {
  @apply bg-[#fafafa] px-[12px] py-[2px];
  .row {
    @apply flex;
  }
  .row > li {
    @apply flex-1 p-[4px] text-[14px] leading-[32px];
  }
  .row + .row {
    border-top: 1px solid #1f1f1f0f;
  }
}

.tabs :deep(.el-tabs__nav-scroll) {
  display: flex;
}
.tabs :deep(.el-tabs__nav-wrap) {
  &::after {
    display: none;
  }
}

.btn {
  --el-button-text-color: var(--color-text-primary);
  --el-button-bg-color: #fff;
  --el-button-border-color: var(--primary-color);
}
</style>
